<template>
    <div>
         <!-- 大标题 -->
        <h1 class="photoinfo-title">{{photoinfo.title}}</h1>
        <!-- 子标题 -->
        <p class="photoinfo-subtitle">
            <span>{{photoinfo.add_time|dateFormat}}</span>
            <span>点击{{photoinfo.click}}次</span>
        </p>
        <hr/>

        <!-- 缩略图区域 -->
        <div class="photoinfo-thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>
        <!-- 图片内容区域 -->
        <div class="photoinfo-content" v-html="photoinfo.content"></div>

        <!-- 评论子组件 -->
        <cmt-box :id="this.id"></cmt-box>
    </div>
</template>

<script>
    import comment from '../subcomponents/comment.vue'
    export default{
        data(){
            return{
                id:this.$route.params.id,
                photoinfo:{//图片详情
                    title:"图片详情中的标题图片详情中的标题",
                    add_time:"2017-11-21 12:10:01",
                    click:1,
                    content:"动漫”这一合称的出现主要是因为日本的动画和漫画产业联系紧密，所以日本动画和漫画在中国传播的过程中，,用来指日本的动画和漫画，用来指日本的动画和漫画。"
                },
                list:[//缩略图数组
                    {
                    src:"/src/images/photolist/dm1.jpg",
                    msrc:"/src/images/photolist/dm1.jpg",
                    w: 500,
                    h: 400
                    },
                     {
                    src:"/src/images/photolist/dm2.jpg",
                    msrc:"/src/images/photolist/dm2.jpg",
                    w: 500,
                    h: 400
                    },
                     {
                    src:"/src/images/photolist/dm3.jpg",
                    msrc:"/src/images/photolist/dm3.jpg",
                    w: 500,
                    h: 400
                    },
                     {
                    src:"/src/images/photolist/dm4.jpg",
                    msrc:"/src/images/photolist/dm4.jpg",
                    w: 500,
                    h: 400
                    },
                     {
                    src:"/src/images/photolist/dm5.jpg",
                    msrc:"/src/images/photolist/dm5.jpg",
                    w: 500,
                    h: 400
                    }
                ]
            }
        },
        components:{
            'cmt-box':comment
        },
        methods:{
            handleClose () {
               //可添加缩略图关闭时触发的事件
            }
        }
        // created(){
        //   this.getPhotoInfo()      
        // },
        // methods:{
        //     getPhotoInfo(){
        //         this.$http.get('api/getimageInfo/'+this.id).then(function(result){
        //             if(result.body.status===0){
        //                 this.photoinfo=result.body.message[0];
        //             }
        //         })
        //     }
        // }
    }
</script>

<style lang="less" >
    .photoinfo-title{
        font-size: 14px;
        text-align: center;
        color:rgb(0%, 63.9%, 94.5%);
        margin: 20px 0;
    }
    .photoinfo-subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }
    .photoinfo-content{
        font-size: 13px;
        line-height: 30px;
    }
    .photoinfo-thumbs{
        .my-gallery{
            display: flex;
            flex-wrap: wrap;
            figure{
                margin: 10px;
                img{
                width: 100px;
                height: 80px;
                box-shadow: 0 0 10px black;
                }
            }
        }
    }
</style>
